<template>
	<div class="peixun">
		<div class="bigData-head">
			<a href="javascript:history.go(-1)"><i class="icon iconfont icon-fanhui"></i></a>教学运营统计分析</div>
		<div class="message-cont">
			<!-- select car -->
      <div class="shadown" v-show="selectCarSH"></div>
			<div class="select-car-content" v-show="selectCarSH">
        <div class="search-car-cont">
          <input class="search-ipt" type="text" v-model="plateNumber" placeholder="请输入车牌号后四位">
          <span @click="totalCar">全部车辆</span>
          <span class="search-car-close iconfont icon-guanbi" @click="carInforHide"></span>
        </div>
        <div class="car-table">
          <el-table
            :data="carInfor"
            height="380"
            border
            style="width: 100%">
            <el-table-column
              label="车牌号">
              <template scope="scope">
                <p @click="handleEdit(scope.row)">{{scope.row.plateNumber}}</p>
              </template>
            </el-table-column>
            <el-table-column label="加时数" width="100" sortable
            prop="sub2Moni">
              <template scope="scope">
                <p @click="handleEdit(scope.row)">{{parseInt((scope.row.sub2Moni + scope.row.sub3Moni)/60)}}</p>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              label="非教学次数"
              prop="fjxTotal">
              <template scope="scope">
                <p @click="handleEdit(scope.row)">{{scope.row.fjxTotal}}</p>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              label="非教学里程"
              prop="fjxMileage">
              <template scope="scope">
                <p @click="handleEdit(scope.row)">{{parseInt(scope.row.fjxMileage/1000)}}</p>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              label="未采集里程">
              <template scope="scope">
                <p @click="handleEdit(scope.row)">0</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
			<!--教学运营情况-->
			<div class="peixun-cont">
				<p class="peixun-title">
					<i class="icon iconfont icon-jiaoxueyuebao"></i>{{selectCar.plateNumber}} 运营情况
					<span class="selectCar" @click="carInforShow">车辆详情</span>
				</p>
				<div class="xueshiT">
					<div class="xueshiT-item">
						<p class="yunyingQK-head">本月加时模拟
							<span class="yunyingQK-nomal">教学学时</span>
						</p>
						<div class="yunyingQK-nomal-num">{{carData.sub2Jiashi + carData.sub3Jiashi + carData.sub2Moni + carData.sub3Moni}}
							<span class="yunyingQK-danwei-nomal">小时</span>
						</div>
						<span class="yunyingQK-kemu">科二：加时{{carData.sub2Jiashi}},模拟{{carData.sub2Moni}}</span>
						<span class="yunyingQK-kemu">科三：加时{{carData.sub3Jiashi}},模拟{{carData.sub3Moni}}</span>
					</div>
					<div class="xueshiT-item">
						<p class="yunyingQK-head">本月车辆
							<span class="yunyingQK-nomal">教学里程</span>
						</p>
						<div class="yunyingQK-nomal-num">{{carData.sub2Mileage + carData.sub3Mileage}}
							<span class="yunyingQK-danwei-nomal"> km</span>
						</div>
						<span class="yunyingQK-kemu">科二：{{carData.sub2Mileage}}</span>
						<span class="yunyingQK-kemu">科三：{{carData.sub3Mileage}}</span>
					</div>
				</div>
				<div class="xueshiT">
					<div class="xueshiT-item">
						<p class="yunyingQK-head">本月车辆
							<span class="yunyingQK-Unnomal">非教学次数</span>
						</p>
						<div class="yunyingQK-Unnomal-num">{{carData.fjxTotal}}
							<span class="yunyingQK-danwei-Unnomal"> 次</span>
						</div>
						<!--<span class="yunyingQK-kemu">科目二：975次</span>
						<span class="yunyingQK-kemu">科目三：475次</span>-->
					</div>
					<div class="xueshiT-item">
						<p class="yunyingQK-head">本月车辆
							<span class="yunyingQK-Unnomal">非教学里程</span>
						</p>
						<div class="yunyingQK-Unnomal-num">{{carData.fjxMileage}}
							<span class="yunyingQK-danwei-Unnomal"> km</span>
						</div>
						<!--<span class="yunyingQK-kemu">科目二：975km</span>
						<span class="yunyingQK-kemu">科目三：475km</span>-->
					</div>
				</div>
				<div class="xueshiT">
					<div class="xueshiT-item">
						<p class="yunyingQK-head">本月车辆
							<span class="yunyingQK-Unnomal">未采集次数</span>
						</p>
						<div class="yunyingQK-Unnomal-num">0
							<span class="yunyingQK-danwei-Unnomal"> 次</span>
						</div>
					</div>
					<div class="xueshiT-item">
						<p class="yunyingQK-head">本月车辆
							<span class="yunyingQK-Unnomal">未采集里程</span>
						</p>
						<div class="yunyingQK-Unnomal-num">0
							<span class="yunyingQK-danwei-Unnomal"> km</span>
						</div>
					</div>
				</div>
			</div>
			<!--本年度非教学里程分析-->
			<div class="peixun-cont">
				<p class="peixun-title">
					<i class="icon iconfont icon-analysis"></i>本年度非教学里程分析</p>
				<div class="qingkuangFX">
					<div class="month-echart">
						<IEcharts :option="line"></IEcharts>
					</div>
				</div>
			</div>
			<!--本年度未采集里程分析-->
			<div class="peixun-cont">
				<p class="peixun-title">
					<i class="icon iconfont icon-caiji"></i>本年度未采集里程分析</p>
				<div class="qingkuangFX">
					<div class="month-echart">
						<IEcharts :option="line3"></IEcharts>
					</div>
				</div>
			</div>
			<!--本年度与上一年度非教学里程对比分析-->
			<div class="peixun-cont margin-bottom">
				<p class="peixun-title">
					<i class="icon iconfont icon-fenxixian"></i>本年度与上一年度非教学里程对比分析</p>
				<div class="qingkuangFX">
					<div class="month-echart">
						<IEcharts :option="line2"></IEcharts>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import IEcharts from "vue-echarts-v3";
export default {
  name: "yunying",
  components: {
    IEcharts
  },
  mounted: function() {
    //防止在登陆页没有登陆时候直接手动改变url访问
    initPage.checkLogin();
    //message-cont高度设置
    var WH = $(window).height();
    var RWH = WH - 160;
    $(".message-cont").height(RWH);
    $(".shadown").height(WH);

    //本月tab切换
    $(".monthTab").click(function() {
      $(this)
        .addClass("on")
        .siblings()
        .removeClass("on");
    });

    this.$http
      .get(
        URL +
          "/company/getSubjectLessonStatOther/" +
          appDB.get("companyInfo").companyId,
        {
          headers: { Authorization: appDB.get("companyInfo").token }
        }
      )
      .then(response => {
        var d = response.data;
        if (d.resultCode == 0) {
          this.catTotals.sub2Jiashi = d.record.t1sub2Hours;
          this.catTotals.sub2Moni = d.record.t2sub2Hours;
          this.catTotals.sub3Jiashi = d.record.t1sub3Hours;
          this.catTotals.sub3Moni = d.record.t2sub3Hours;
          // $.extend(this.jsmnxs, d.record);
        }
      });

    this.$http
      .get(
        URL +
          "/company/getSubjectLessonStat/" +
          appDB.get("companyInfo").companyId,
        {
          headers: { Authorization: appDB.get("companyInfo").token }
        }
      )
      .then(response => {
        var d = response.data;
        if (d.resultCode == 0) {
          this.catTotals.sub2Mileage = d.record.sub2Mileage;
          this.catTotals.sub3Mileage = d.record.sub3Mileage;
          // $.extend(this.jxlc, d.record);
        }
      });

    this.$http
      .get(URL + "/company/getNoTaught/" + appDB.get("companyInfo").companyId, {
        headers: { Authorization: appDB.get("companyInfo").token }
      })
      .then(response => {
        var d = response.data;
        if (d.resultCode == 0) {
          this.catTotals.fjxMileage = parseInt(d.record.mileage/1000);
          this.catTotals.fjxTotal = d.record.total;
          // $.extend(this.fjxlc, d.record);
        }
      });

    // 车辆详情
    this.$http
      .get(
        URL + "/company/carOperation/" + appDB.get("companyInfo").companyId,
        {
          headers: { Authorization: appDB.get("companyInfo").token }
        }
      )
      .then(response => {
        var d = response.data;
        this.tableData = d.record;
      });

    // 本年度非教学里程分析
    this.$http
      .get(
        URL +
          "/company/carFjxlc/" +
          appDB.get("companyInfo").companyId,
        {
          headers: { Authorization: appDB.get("companyInfo").token }
        }
      )
      .then(response => {
        var d = response.data;
        let list = [];
        for(let i =0; i<d.record.length; i++){
          list[i] = parseInt(d.record[i]/1000)
        }
        this.line.series[0].data = list;
      });
  },
  computed: {
    // 车辆查询
    carInfor() {
      if (this.plateNumber == "") {
        return this.tableData;
      } else {
        return this.tableData.filter(e => {
          return (
            //e.plateNumber == this.plateNumber
            // 主意这里是模糊查询 所以用indexOF，而不用上面的e.plateNumber == this.plateNumber
            e.plateNumber.indexOf(this.plateNumber) != -1
          );
        });
      }
    },

    // 按单个车辆显示大数据
    carData() {
      if (!this.selectCar.carId) {
        return this.catTotals;
      } else {
        return $.extend({}, this.selectCar, {
            sub2Jiashi: parseInt(this.selectCar.sub2Jiashi / 60),
            sub3Jiashi: parseInt(this.selectCar.sub3Jiashi / 60),
            sub2Moni : parseInt(this.selectCar.sub2Moni / 60),
            sub3Moni : parseInt(this.selectCar.sub3Moni / 60),
            sub2Mileage : parseInt(this.selectCar.sub2Mileage / 1000),
            sub3Mileage : parseInt(this.selectCar.sub3Mileage / 1000),
            fjxMileage : parseInt(this.selectCar.fjxMileage / 1000)
          });
      }
    }
  },
  data: () => ({
    selectCarSH: false,
    plateNumber: "",
    tableData: [],
    selectCar: {},
    catTotals: {
      companyId: "", //驾校编号
      carId: "", //车辆编号
      plateNumber: "", //车牌号
      fjxMileage: 0, //非教学里程
      fjxTotal: 0, //非教学次数
      sub2Mileage: 0, //科目二教学里程
      sub3Mileage: 0, //科目三教学里程
      sub2Jiashi: 0, //科目二加时分钟
      sub3Jiashi: 0, //科目三加时分钟
      sub2Moni: 0, //科目二模拟分钟
      sub3Moni: 0 //科目三模拟分钟
    },
    // jsmnxs: {
    //   t1sub2Hours: 0,
    //   t1sub3Hours: 0,
    //   t2sub2Hours: 0,
    //   t2sub3Hours: 0
    // },
    // jxlc: {
    //   totalMileage: 0,
    //   sub2Mileage: 0,
    //   sub3Mileage: 0
    // },
    // fjxlc: {
    //   total: 0,
    //   mileage: 0
    // },
    line: {
      title: {
        text: "本年度非教学里程分析（单位：Km）",
        textStyle: {
          color: "#fff",
          fontWeight: "nomal"
        }
      },
      tooltip: {
        trigger: "axis"
      },

      legend: {
        // selected: {
        //   科二里程: true,
        //   科三里程: false,
        //   总里程: false
        // },
        right: "0",
        data: ["非教学里程"],
        textStyle: {
          color: "#fff",
          fontWeight: "nomal"
        }
      },
      grid: {
        left: "1%",
        right: "3%",
        bottom: "0",
        containLabel: true
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisLabel: {
            color: "#ffffff"
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00b77a",
              width: 2,
              type: "solid"
            }
          }
        }
      ],
      yAxis: [
        {
          axisLabel: {
            color: "#ffffff"
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#00b77a"],
              width: 1,
              type: "solid"
            }
          },
          type: "value",
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00b77a",
              width: 3,
              type: "solid"
            }
          }
        }
      ],
      series: [
        {
          name: "非教学里程",
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          data: [],
          itemStyle: {
            normal: {
              color: "#00b77a"
            }
          },
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值"
              }
            ]
          }
        }
      ]
    },

    line3: {
      tooltip: {
        trigger: "axis"
      },

      legend: {
        right: "0",
        data: ["未采集里程"],
        textStyle: {
          color: "#fff",
          fontWeight: "nomal"
        }
      },
      grid: {
        left: "1%",
        right: "3%",
        bottom: "0",
        containLabel: true
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisLabel: {
            color: "#ffffff"
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00b77a",
              width: 2,
              type: "solid"
            }
          }
        }
      ],
      yAxis: [
        {
          axisLabel: {
            color: "#ffffff"
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#00b77a"],
              width: 1,
              type: "solid"
            }
          },
          type: "value",
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00b77a",
              width: 3,
              type: "solid"
            }
          }
        }
      ],
      series: [
        {
          name: "未采集里程",
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          itemStyle: {
            normal: {
              color: "#00b77a"
            }
          }
        }
      ]
    },

    line2: {
      tooltip: {
        trigger: "axis"
      },

      legend: {
        // selected: {
        //     '全部学时': true,
        //     '科一学时': false,
        //     '科二学时': false,
        //     '科三学时': false,
        // },
        right: "0",
        data: ["2017年", "2016年"],
        textStyle: {
          color: "#fff",
          fontWeight: "nomal"
        }
      },
      grid: {
        left: "1%",
        right: "3%",
        bottom: "0",
        containLabel: true
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisLabel: {
            color: "#ffffff"
          },
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00b77a",
              width: 2,
              type: "solid"
            }
          }
        }
      ],
      yAxis: [
        {
          axisLabel: {
            color: "#ffffff"
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#00b77a"],
              width: 1,
              type: "solid"
            }
          },
          type: "value",
          axisTick: {
            lineStyle: {
              width: 0
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00b77a",
              width: 3,
              type: "solid"
            }
          }
        }
      ],
      series: [
        {
          name: "2017年",
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          itemStyle: {
            normal: {
              color: "#00b77a"
            }
          }
        },
        {
          name: "2016年",
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          itemStyle: {
            normal: {
              color: "#feb71f"
            }
          }
        }
      ]
    }
  }),
  methods: {
    carInforShow() {
      this.selectCarSH = true;
    },
    carInforHide() {
      this.selectCarSH = false;
    },
    // 表格行内编辑
    handleEdit(row) {
      this.selectCar = row;
      this.selectCarSH = false;
      this.$http
      .get(
        URL +
          "/company/carFjxlc/" +
          appDB.get("companyInfo").companyId +
          "/" +
          row.plateNumber,
        {
          headers: { Authorization: appDB.get("companyInfo").token }
        }
      )
      .then(response => {
        var d = response.data;
        let list = [];
        for(let i =0; i<d.record.length; i++){
          list[i] = parseInt(d.record[i]/1000)
        }
        this.line.series[0].data = list;
      });
    },
    // totalCar
    totalCar() {
      this.selectCar = {};
      this.$http
      .get(
        URL +
          "/company/carFjxlc/" +
          appDB.get("companyInfo").companyId,
        {
          headers: { Authorization: appDB.get("companyInfo").token }
        }
      )
      .then(response => {
        var d = response.data;
        let list = [];
        for(let i =0; i<d.record.length; i++){
          list[i] = parseInt(d.record[i]/1000)
        }
        this.line.series[0].data = list;
        // this.line.series[0].data = d.record;
      });
      this.selectCarSH = false;
    }
  }
};
</script>

<style scoped>
.shadown {
  width: 100%;
  position: absolute;
  background: #000;
  opacity: 0.5;
  height: 864px;
  z-index: 9999;
  top: 0;
  left: 0;
}
.selectCar {
  float: right;
  padding: 10px 30px;
  background: url(../../static/images/selectCar-bg.png);
  background-size: 100% 100%;
  color: #000;
}
.select-car-content {
  width: 90%;
  margin: 0 3%;
  padding: 15px 2%;
  float: left;
  position: absolute;
  top: 160px;
  left: 0;
  background: #fff;
  border-radius: 5px;
  z-index: 99999;
}
.search-car-cont {
  width: 100%;
  float: left;
  padding: 0 0 15px 0;
  border-bottom: 1px solid #d4cccc;
}
.search-ipt {
  padding: 10px 20px;
  background: #ebecf3;
  border-radius: 30px;
}
.search-car-close {
  float: right !important;
  margin-top: 6px;
  color: #707070 !important;
}
.car-table {
  width: 100%;
  float: left;
  margin-top: 20px;
}
.peixun {
  width: 100%;
  float: left;
  overflow: hidden;
}

.bigData-head {
  width: 94%;
  padding: 0 3%;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  color: #fff;
  float: left;
  background: url(../../static/images/header-bottom-bg.jpg) repeat-x bottom;
}

.peixun-cont {
  width: 100%;
  float: left;
}

.peixun-title {
  width: 100%;
  font-size: 20px;
  float: left;
  color: #fff;
  margin: 40px 0 20px 0;
}

.iconfont {
  font-size: 24px;
  color: #00b77a;
  float: left;
  margin-right: 6px;
}

.xueshiT {
  width: 100%;
  float: left;
  display: flex;
  justify-content: space-between;
}

.xueshiT-item {
  width: 44%;
  padding: 15px 2%;
  float: left;
  border-radius: 5px;
  box-shadow: 1px 1px 3px #102337;
  margin-bottom: 20px;
}

.yunyingQK-head {
  padding-bottom: 15px;
  color: #fff;
  font-size: 18px;
}

.yunyingQK-nomal {
  color: #00b77a;
}

.yunyingQK-Unnomal {
  color: #f0c102;
}

.qingkuangFX {
  width: 100%;
  float: left;
  background: #2d4257;
  box-shadow: 1px 1px 3px #102337;
}

.qingkuangFX-title {
  width: 100%;
  float: left;
  color: #fff;
  font-size: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #00b77a;
}

.qingkuangFX-title ul li {
  height: 22px;
  line-height: 22px;
  padding: 0 40px;
  float: left;
  border-right: 1px solid #fff;
  height: 22px;
}

.monthTab.on {
  color: #00b77a;
  border-right: 1px solid #00b77a;
}

.month-echart {
  width: 94%;
  padding: 20px 3%;
  height: 260px;
  float: left;
}

.margin-bottom {
  margin-bottom: 50px;
}

.yunyingQK-nomal-num {
  width: 55%;
  float: left;
  padding: 15px 0;
  font-size: 40px;
  color: #13c970;
}

.yunyingQK-Unnomal-num {
  width: 160px;
  float: left;
  padding: 15px 0;
  font-size: 40px;
  color: #f0c102;
}

.yunyingQK-danwei-nomal {
  font-size: 18px;
}

.yunyingQK-danwei-Unnomal {
  font-size: 18px;
}

.yunyingQK-kemu {
  width: 45%;
  float: right;
  margin-top: 15px;
  color: #fff;
  font-size: 12px;
  text-align: right;
}

.icon-fanhui {
  color: #fff;
}
</style>